<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <!-- js全局变量 -->
    <script type="text/javascript">
        var Feng = {
            ctxPath: "${ctxPath}",
            version: '${constants.getReleaseVersion()}',
        };
    </script>
    <script type="text/javascript"
            src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
    <script type="text/javascript"
            src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
    <style>
        .vote-container {
            background: #f8f8f8;
            padding: 20px;
        }
        .vote-title {
            text-align: center;
            color: #1E9FFF;
            font-size: 24px;
            padding: 20px 0;
            background: linear-gradient(to right, #e8f4ff, #f0f9ff, #e8f4ff);
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(30, 159, 255, 0.1);
        }
        .vote-rules {
            background: #fff;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
            border-left: 5px solid #1E9FFF;
        }
        .vote-section {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .section-title {
            color: #1E9FFF;
            font-size: 18px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .vote-count {
            color: #FF5722;
            margin-left: 10px;
        }
        .vote-btn {
            text-align: center;
            margin-top: 30px;
        }
        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #1E9FFF;
        }
        .layui-form-checked[lay-skin=primary] i {
            background-color: #1E9FFF;
            border-color: #1E9FFF;
        }
        .vote-time {
            background: #fff;
            padding: 15px;
            margin: 15px 0;
            text-align: center;
            border-radius: 4px;
            color: #333;
        }

        .time-label {
            color: #666;
            margin-right: 10px;
        }

        .time-value {
            color: #FF5722;
            font-weight: bold;
            margin-right: 5px;
        }
        .dept-container {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .dept-count {
            float: right;
            color: #FF5722;
            font-weight: bold;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
        }

        .vote-section {
            margin-bottom: 20px;
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .vote-container {
            background: #f8f8f8;
            padding: 20px;
            margin: 0 auto;
        }

        .vote-section {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .section-title {
            color: #333;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f2f2f2;
            position: relative;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #1E9FFF;
        }

        .dept-works {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .layui-input-inline {
            width: auto !important;
            margin: 0 !important;
            min-width: 200px;
        }

        .vote-count {
            float: right;
            color: #666;
            font-size: 16px;
            font-weight: 700;
            display: flex;
            align-items: center;
        }


        /* 优化复选框样式 */
        .layui-form-checkbox[lay-skin=primary] {
            padding-left: 24px;
        }

        .layui-form-checkbox[lay-skin=primary] span {
            color: #666;
        }

        .layui-form-checked[lay-skin=primary] span {
            color: #1E9FFF;
        }
        .section-head{
            background: linear-gradient(to right, #e8f4ff, #f0f9ff, #e8f4ff);
            padding: 10px;
            display: flex  ;
            justify-content: center;
            color: #1E9FFF;
            font-size: 24px;
            align-items: center;
        }
        .section-head .vote-count{
            font-size: 18px;
        }

        .layui-form-checkbox{
            display: flex;
        }
        .layui-form-checkbox >span{
            flex: 1;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-all;
        }

    </style>
</head>
<body>
<div class="vote-container">
    <div class="vote-title">
        山西省统计局"诚信诚实、依法统计"青年主题演讲比赛初赛选票
    </div>

    <div class="vote-time">
        <span class="time-label">投票时间：</span><span id="beginTime" class="time-value"></span>
        <span class="time-label">~</span><span id="endTime" class="time-value"></span>
        <span id="state" style="font-weight: 600"></span>
    </div>

    <div class="vote-rules">
        <h3>请根据作品质量和评选标准，请为参赛选手投出您的宝贵一票，感谢您的关注和支持！投票规则如下：</h3>
        <p>1. 每个IP地址限投1次。</p>
        <p>2. 每次投票需要选择<span class="vote-rules-max-num">?</span>位参赛选手，多于或少于<span class="vote-rules-max-num">12</span>位均视为无效票。</p>
        <p>3. 请在规定时间内完成投票。</p>
    </div>

    <div class="layui-form" lay-filter="voteForm">
        <!-- 省级统计局投票区 -->
        <div class="vote-section">
            <div class="section-head">
                投票区
                <span class="vote-count">已选择：<span id="voteCount" class="dept-count" style="font-size: 18px;font-weight: 600">0</span>/<span id="maxCount">3</span></span>
            </div>
            <div id="voteContainer" class="layui-form-item"></div>
        </div>

        <div class="vote-btn">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-disabled" style="display: none" id="submitVote" disabled>
                提交投票
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="${ctxPath}/assets/modular/business/index/votep4.js"></script>
</body>
</html>